<template>
  <div class="hz">
    <!-- 工具栏和搜索栏 -->
    <el-form :inline="true" :model="keyword" ref="searchForm" class="demo-form-inline">
      <el-form-item label="物料分类名称" prop="itemTypeName">
        <el-input size="small" clearable v-model="keyword.itemTypeName" placeholder="物料分类名称"></el-input>
      </el-form-item>
      <el-form-item label="是否启用" prop="enableFlag">
        <el-input size="small" clearable v-model="keyword.enableFlag" placeholder="是/否"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="search" icon="el-icon-search">查询</el-button>
        <el-button type="primary" plain size="small" @click="resetSearchForm('searchForm')" icon="el-icon-refresh">
          重置
        </el-button>
      </el-form-item>
    </el-form>


    <!-- 数据展示表 -->
    <el-table
      :data="mdTypeList"
      style="width: 100%;margin-bottom: 20px;"
      row-key="itemTypeId"
      border
      default-expand-all
      :tree-props="{children: 'children'}">
      <el-table-column
        prop="itemTypeName"
        label="分类"
        align="center"
        width="200">
      </el-table-column>
      <el-table-column
        prop="orderNum"
        label="排序"
        align="center"
        width="150">
      </el-table-column>
      <el-table-column
        prop="itemOrProduct"
        align="center"
        label="物料/产品"
        width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.itemOrProduct == 'PRODUCT' ? '产品' : '物料' }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="enableFlag"
        align="center"
        label="是否启用"
        width="150">
        <template slot-scope="scope">
          <el-tag :type="scope.row.enableFlag == 'Y'?'':'danger'">
            <span>{{ scope.row.enableFlag == 'Y' ? '是' : '否' }}</span></el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        align="center"
        width="250">
      </el-table-column>
      <el-table-column
        align="center"
        label="操作"
        width="410">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="warning" plain
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
          >修改
          </el-button>
          <el-button
            size="mini"
            type="primary" plain
            icon="el-icon-plus"
            @click="handleAdd(scope.row)"
          >新增
          </el-button>
          <el-button
            v-if="scope.$index != 0"
            size="mini"
            type="danger" plain
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          >删除
          </el-button>
        </template>
      </el-table-column>

    </el-table>

    <!--添加和修改 的对话框-->
    <el-dialog :title="dialogName" :visible.sync="addOrEditDialog" width="43%">
      <el-form :model="itemType" :rules="rules" ref="addOrEditForm">
        <el-form-item :label="flm">
          <el-select v-model="itemType.currentParentTName" style="width: 500px;" placeholder="请选择分类" disabled>
            <el-option :label="itemType.currentParentTName" :value="itemType.currentParentTName"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-col :span="11">
            <el-form-item label="分类名称" prop="itemTypeName">
              <el-input
                v-model="itemType.itemTypeName"
                autocomplete="off"
                style="width: 200px"
                placeholder="请输入名称"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="显示排序" prop="orderNum">
              <el-input-number v-model="itemType.orderNum" controls-position="right"></el-input-number>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-col :span="11">
            <el-form-item label="物料/产品">
              <el-radio-group v-model="itemType.itemOrProduct">
                <el-radio label="ITEM">物料</el-radio>
                <el-radio label="PRODUCT">产品</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="启用状态">
              <el-radio-group v-model="itemType.enableFlag">
                <el-radio label="Y">是</el-radio>
                <el-radio label="N">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelAddOrEdit('addOrEditForm')">取 消</el-button>
        <el-button type="primary" @click="addOrEditType('addOrEditForm')"
        >提交
        </el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getTypeList, delType, addType, updateType, getFqName } from '@/api/type'

export default {
  name: 'MdItemType',
  data() {
    return {
      loading: true,
      mdTypeList: [],
      keyword: {
        itemTypeName: '',
        enableFlag: ''
      },
      flm:'',
      itemType: {
        //这个id修改功能用
        itemTypeId: '',
        itemTypeName: '',
        orderNum: '',
        itemOrProduct: '',
        enableFlag: '',
        // 当前要新建子类的选择的父分类名
        currentParentTName: '',
        //  当前要新建子类的选择的父亲类ID
        currentParentTId: '',
        //往后端传要新建子类的这个父亲的ID，方便后续存值使用
        parentTypeId: ''
      },
      rules: {
        itemTypeName: [
          { required: true, message: '分类名称不能为空', trigger: 'blur' }
        ],
        orderNum: [
          { required: true, message: '显示排序不能为空', trigger: 'blur' }
        ]
      },
      addOrEditDialog: false,
      dialogName: ''
    }
  },
  methods: {
    /** 查数组 */
    fetchData() {
      //组装查询参数
      let params = {
        itemTypeName: this.keyword.itemTypeName,
        enableFlag: this.keyword.enableFlag
      }
      getTypeList(params).then(res => {
        console.log(res.data)
        if (res.code == 20000) {
          this.loading = false
          this.mdTypeList = res.data
          this.keyword = {}
        } else {
          this.$message({
            type: 'error',
            message: '查询失败',
            duration: 1000
          })
        }
      })
    },
    //模糊查询
    search() {
      this.loading = true
      this.fetchData()
    },
    // 重置表单
    resetSearchForm(formName) {
      this.loading = true
      this.$refs[formName].resetFields()
      this.fetchData()
    },
    //删除单项
    handleDelete(row) {
      this.$confirm('确认删除名称为["' + row.itemTypeName + '"]的分类?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        delType({ id: row.itemTypeId }).then(res => {
          console.log(res)
          if (res.code == 20000) {
            this.$message({
              type: 'success',
              message: '删除成功',
              duration: 1000
            })
            this.fetchData()
          }
        })
      })
    },
    //打开编辑对话框
    handleUpdate(row) {
      this.dialogName = '修改分类'
      this.itemType = row;
      this.flm = '当前类名'
      //将这一行的ID拿出
      getFqName({parentTypeId:row.parentTypeId}).then((res) => {
              if (res.code == 20000) {
                this.itemType.currentParentTName = res.data
                this.addOrEditDialog = true
              }
            })
    },
    //打开添加对话框
    handleAdd(row) {
      this.dialogName = '添加分类'
      this.flm = '父类名'
      this.addOrEditDialog = true
      //将这一行的类名和ID拿出
      this.itemType.currentParentTName = row.itemTypeName
      this.itemType.currentParentTId = row.itemTypeId
    },
    //取消添加/修改按钮
    cancelAddOrEdit(formName) {
      this.$refs[formName].resetFields()
      this.itemType = {}
      this.loading = true
      this.fetchData()
      this.addOrEditDialog = false
    },
    //对话框确定按钮
    addOrEditType(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          if (this.dialogName == '添加分类') {
            this.itemType.parentTypeId = this.itemType.currentParentTId
            addType(this.itemType).then((res) => {
              if (res.code == 20000) {
                this.$message({
                  type: 'success',
                  message: '添加成功',
                  duration: 1000
                })
                this.fetchData()
                this.addOrEditDialog = false
                this.itemType = {}
              } else {
                this.$message({
                  type: 'error',
                  message: '添加失败',
                  duration: 1000
                })
              }
            })
          } else if (this.dialogName == '修改分类') {
            updateType(this.itemType).then((res) => {
              if (res.code == 20000) {
                this.$message({
                  type: 'success',
                  message: '修改成功',
                  duration: 1000
                })
                this.fetchData()
                this.addOrEditDialog = false
                this.itemType = {}
              } else {
                this.loading = false
                this.$message({
                  type: 'error',
                  message: '修改失败',
                  duration: 1000
                })

              }
            })
          } else {
            return false
          }
        } else {
          return false
        }
      })
    }

  },
  created() {
    this.fetchData()
  }
}
</script>

<style>
.hz {
  margin-top: 10px;
  margin-left: 15px;
  padding-left: 5px;
}
</style>
